<template>
  <div class="menu-container">
    <div class="nav-collapse">
      <el-switch
        v-model="isSwitch"
        @change="handleSwitch"
        inline-prompt
        active-text="开"
        inactive-text="关"
      />
    </div>

    <el-menu
      :default-active="activePath"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      router
    >
      <el-menu-item index="/home">
        <el-icon><House /></el-icon>
        <template #title> 首页 </template>
      </el-menu-item>
      <el-menu-item index="/mall">
        <el-icon><GoodsFilled /></el-icon>
        <template #title> 商品管理 </template>
      </el-menu-item>
      <el-menu-item index="/user">
        <el-icon><User /></el-icon>
        <template #title> 用户管理 </template>
      </el-menu-item>
      <el-sub-menu index="/Other/pageOne">
        <template #title>
          <el-icon><HotWater /></el-icon>
          <span>其他</span>
        </template>
        <el-menu-item-group>
          <template #title><span>页面</span></template>
          <el-menu-item index="/Other/pageOne"> 添加商品 </el-menu-item>
          <el-menu-item index="/Other/pageTwo"> 权限页面 </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { House, HotWater, User, GoodsFilled } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";

const route = useRoute();
const isCollapse = ref(false);
const isSwitch = ref(!isCollapse.value);
//根据当前路由选中
const activePath = computed(() => {
  return route.fullPath;
});
//监听窗口变化判断是否应该收缩
onMounted(() => {
  window.addEventListener("resize", (e) => {
    if (!isCollapse.value && e.target.innerWidth <= 1300) {
      isCollapse.value = true;
      isSwitch.value = false;
    }
  });
});

//侧边导航弹出/收缩
const handleSwitch = (bol) => {
  isCollapse.value = !bol;
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.menu-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .nav-collapse {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
    padding-top: 10px;
    border-right: 1px solid #dcdfe6;
  }
  .el-menu {
    flex: 1;
  }
}
</style>
